<template>
  <div class="container" @click="turnRoute">
    <CommonTitle><p slot="title">财务数据</p></CommonTitle>
    <!-- <div id="mainchart" ref="barChart"></div> -->
    <Fncdata1 v-if="isShow" />
    <Fncdata2 v-else />
    <div class="switch">
      <span @mouseenter="switchBtn1Hover">本月 </span>|
      <span @mouseenter="switchBtn2Hover">上月</span>
    </div>
  </div>
</template>

<script>
import CommonTitle from "./CommonTitle";
import Fncdata1 from "./Fncdata1.vue";
import Fncdata2 from "./Fncdata2";
// import * as echarts from "echarts";

export default {
  components: {
    CommonTitle,
    Fncdata1,
    Fncdata2,
  },
  mounted() {},
  computed: {},
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    turnRoute() {
      this.$alert("点击确定转跳财务管理界面", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.$router.push("/layout/money");
          } else {
            return;
          }
        },
      });
    },
    switchBtn1Hover() {
      this.isShow = true;
    },
    switchBtn2Hover() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding-top: 24px;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #fff;

  h3 {
    margin-left: 24px;
    margin-bottom: 0;
  }
  &:hover h3 {
    color: #438afe;
  }
  .switch {
    width: 100px;
    height: 30px;
    line-height: 30px;
    // background-color: red;
    position: absolute;
    right: 20px;
    top: 18px;
    font-weight: 600;
    color: #333;
    span {
      cursor: pointer;
      &:hover {
        color: orangered;
      }
    }
  }
}
</style>